<template>
  <div>
    <div>
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-input
            placeholder="请输入员工名进行搜索"
            style="width: 300px; margin-right: 10px" size="small"
            v-model="empName" @keydown.enter.native="initEmps"
            clearable @clear="initEmps"
          ></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" @click="initEmps">
            搜索
          </el-button>
          <!-- <el-button type="primary" size="small" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
            <i :class="showAdvanceSearchVisible? 'fa fa-angle-double-up' : 'fa fa-angle-double-down'"></i>
            高级搜索
          </el-button> -->
        </div>
        <div>
          <el-upload
            style="display: inline-flex;margin-right: 10px;"
            :show-file-list="false" :before-upload="beforeUpload"
            :on-success="onSuccess" :on-error="onError"
            :disabled="importDataDisabled"
            :headers="headers"
            action="/employee/basic/import">
            <el-button type="success" size="small" :icon="importDataBtnIcon" :disabled="importDataDisabled">
              {{importDataBtnText}}
            </el-button>
          </el-upload>
          <el-button type="success" size="small" @click="exportData" icon="el-icon-download">
            导出数据
          </el-button>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="showAddEmpView"
            >添加员工</el-button>
        </div>
      </div>
      <transition name="fade">
        <div style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;" v-show="showAdvanceSearchVisible">
          <el-row>
            <el-col :span="5">
              政治面貌：
              <el-select v-model="emp.politicId" size="mini" style="width: 200px" placeholder="政治面貌">
                <el-option v-for="item in politicsStatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              民族：
              <el-select v-model="emp.nationId" size="mini" style="width: 130px;" placeholder="民族">
                <el-option v-for="item in nations" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              职位：
              <el-select v-model="emp.posId" size="mini" style="width: 150px;" placeholder="职位">
                <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              职称：
              <el-select v-model="emp.jobLevelId" size="mini" style="width: 150px;" placeholder="职称">
                <el-option v-for="item in joblevels" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="7">
              所属部门：
              <el-popover
                  placement="bottom"
                  title="请选择部门"
                  width="240"
                  trigger="manual"
                  v-model="visible">
                  <el-tree :data="allDeps" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
                  <div style="width:200px; height:24px; display:inline-flex; border:1px solid #dedede; border-radius:5px;
                    cursor:pointer;align-items:center; box-sizing:border-box; padding-left: 8px; font-size: 14px;" 
                    @click="showDepView" slot="reference">{{inputDepName}}</div>
              </el-popover>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="24" style="display: inline-flex;justify-content: flex-end;">
              <el-button size="mini">取消</el-button>
              <el-button size="mini" icon="el-icon-search" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </transition>
    </div>
    <div style="margin-top: 10px;">
      <el-table :data="emps" stripe border style="width: 100%"
        v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(f, f, f, 0.8)">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="姓名" align="left" width="90" fixed="left">
        </el-table-column>
        <el-table-column prop="workId" label="工号" align="left" width="90">
        </el-table-column>
        <el-table-column prop="gender" label="性别" align="left" width="50">
        </el-table-column>
        <el-table-column prop="birthday" label="生日日期" align="left" width="100">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号码" align="left" width="170">
        </el-table-column>
        <el-table-column prop="wedlock" label="婚姻状态" align="left" width="85">
        </el-table-column>
        <el-table-column prop="nation.name" label="民族" align="left" width="80">
        </el-table-column>
        <el-table-column prop="nativePlace" label="籍贯" align="left" width="80">
        </el-table-column>
        <el-table-column prop="politicsStatus.name" label="政治面貌" align="left" width="75">
        </el-table-column>
        <el-table-column prop="email" label="电子邮件" align="left" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="电话号码" align="left" width="110">
        </el-table-column>
        <el-table-column prop="address" label="联系地址" align="left" width="230">
        </el-table-column>
        <el-table-column prop="department.name" label="所属部门" align="left" width="100">
        </el-table-column>
        <el-table-column prop="joblevel.name" label="职称" width="50">
        </el-table-column>
        <el-table-column prop="position.name" label="职位" width="100">
        </el-table-column>
        <el-table-column prop="engageForm" label="聘用形式" align="left" width="100">
        </el-table-column>
        <el-table-column prop="tiptopDegree" label="最高学历" align="left" width="80">
        </el-table-column>
        <el-table-column prop="school" label="毕业院校" align="left" width="150">
        </el-table-column>
        <el-table-column prop="specialty" label="专业" align="left" width="150">
        </el-table-column>
        <el-table-column prop="workState" label="在职状态" align="left" width="80">
        </el-table-column>
        <el-table-column prop="beginDate" label="入职日期" align="left" width="100">
        </el-table-column>
        <el-table-column prop="conversionTime" label="转正日期" align="left" width="100">
        </el-table-column>
        <el-table-column prop="beginContract" label="合同起始日期" align="left" width="100">
        </el-table-column>
        <el-table-column prop="endContract" label="合同截止日期" align="left" width="100">
        </el-table-column>
        <el-table-column label="合同期限" align="left" width="100">
          <template slot-scope="scope">
            <el-tag>{{scope.row.contractTerm}}</el-tag>年
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button style="padding: 3px;" size="mini" @click="showEditEmpView(scope.row)">编辑</el-button>
            <el-button style="padding: 3px;" size="mini">查看高级资料</el-button>
            <el-button style="padding: 3px;" size="mini" type="danger" @click="deleteEmp(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
        <el-pagination
          background :total="total"
          layout="sizes, prev, pager, next, jumper, ->, total"
          @size-change="sizeChange" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%"
      @close="closeAddDialog">
      <div>
        <el-form ref="empForm" :model="emp" :rules="rules">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名：" prop="name">
                <el-input v-model="emp.name" placeholder="请输入员工姓名" size="mini" style="width: 150px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别：" prop="gender">
                <el-radio-group v-model="emp.gender" style="margin-top: 13px;">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                  v-model="emp.birthday"
                  type="date"
                  size="mini"
                  style="width: 150px"
                  value-format="yyyy-MM-dd"
                  placeholder="出生日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="政治面貌：" prop="politicId">
                <el-select v-model="emp.politicId" size="mini" style="width: 200px" placeholder="政治面貌">
                  <el-option v-for="item in politicsStatus" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="民族：" prop="nationId">
                <el-select v-model="emp.nationId" size="mini" style="width: 150px;" placeholder="民族">
                  <el-option v-for="item in nations" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="籍贯：" prop="nativePlace">
                <el-input v-model="emp.nativePlace" placeholder="请输入籍贯" size="mini" style="width: 150px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱：" prop="email">
                <el-input v-model="emp.email" placeholder="请输入电子邮箱" size="mini" style="width: 150px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系地址：" prop="address">
                <el-input v-model="emp.address" placeholder="请输入联系地址" size="mini" style="width: 200px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="职位：" prop="posId">
                <el-select v-model="emp.posId" size="mini" style="width: 150px;" placeholder="职位">
                  <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职称：" prop="jobLevelId">
                <el-select v-model="emp.jobLevelId" size="mini" style="width: 150px;" placeholder="职称">
                  <el-option v-for="item in joblevels" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门：" prop="departmentId">
                <el-popover
                    placement="bottom"
                    title="请选择部门"
                    width="200"
                    trigger="manual"
                    v-model="visible">
                    <el-tree :data="allDeps" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
                    <div style="width:150px; height:24px; display:inline-flex; border:1px solid #dedede; border-radius:5px;
                      cursor:pointer; margin-top: 8px; align-items:center; box-sizing:border-box; padding-left: 8px; font-size: 14px;" 
                      @click="showDepView" slot="reference">{{inputDepName}}</div>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话号码：" prop="phone">
                <el-input v-model="emp.phone" placeholder="请输入电话号码" size="mini" style="width: 200px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="工号：" prop="workId">
                <el-input v-model="emp.workId" placeholder="请输入工号" size="mini" style="width: 150px;" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="学历：" prop="tiptopDegree">
                <el-select v-model="emp.tiptopDegree" size="mini" style="width: 150px;" placeholder="学历">
                  <el-option v-for="item in tiptopDegree" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校：" prop="school">
                <el-input v-model="emp.school" placeholder="请输入学校" size="mini" style="width: 150px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="专业名称：" prop="specialty">
                <el-input v-model="emp.specialty" placeholder="请输入专业名称" size="mini" style="width: 200px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="入职日期：" prop="beginDate">
                <el-date-picker
                  v-model="emp.beginDate"
                  type="date"
                  size="mini"
                  style="width: 120px"
                  value-format="yyyy-MM-dd"
                  placeholder="入职日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="转正日期：" prop="conversionTime">
                <el-date-picker
                  v-model="emp.conversionTime"
                  type="date"
                  size="mini"
                  style="width: 120px"
                  value-format="yyyy-MM-dd"
                  placeholder="转正日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同起始日期：" prop="beginContract">
                <el-date-picker
                  v-model="emp.beginContract"
                  type="date"
                  size="mini"
                  style="width: 120px"
                  value-format="yyyy-MM-dd"
                  placeholder="合同起始日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同截止日期：" prop="endContract">
                <el-date-picker
                  v-model="emp.endContract"
                  type="date"
                  size="mini"
                  style="width: 170px"
                  value-format="yyyy-MM-dd"
                  placeholder="合同截止日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号码：" prop="idCard">
                <el-input v-model="emp.idCard" placeholder="请输入身份证号码" size="mini" style="width: 200px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用形式：" prop="engageForm">
                <el-radio-group v-model="emp.engageForm" style="margin-top: 13px;">
                  <el-radio label="全职">全职</el-radio>
                  <el-radio label="劳务合同">劳务合同</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况：" prop="wedlock">
                <el-radio-group v-model="emp.wedlock" style="margin-top: 13px;">
                  <el-radio label="已婚">已婚</el-radio>
                  <el-radio label="未婚">未婚</el-radio>
                  <el-radio label="离异">离异</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddEmp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EmpBasic",
  data() {
    return {
      emps: [],
      loading: false,
      total: 0,
      page: 1,
      size: 10,
      empName: '', // 模糊搜索的name
      dialogVisible: false,
      emp: {  // 添加/修改员工的对象
        "address":"",
        "beginContract":"",
        "beginDate":"",
        "birthday":"",
        "contractTerm":"",
        "conversionTime":"",
        "department":null,
        "departmentId":"",
        "email":"",
        "endContract":"",
        "engageForm":"",
        "gender":"",
        "id":"",
        "idCard":"",
        "jobLevelId":"",
        "joblevel":null,
        "name":"",
        "nation":null,
        "nationId":"",
        "nativePlace":"",
        "notWorkDate":"2022-03-28",
        "phone":"",
        "politicId":"",
        "politicsStatus":null,
        "posId":"",
        "position":null,
        "salary":null,
        "salaryId":1,
        "school":"",
        "specialty":"",
        "tiptopDegree":"",
        "wedlock":"",
        "workAge":"无限",
        "workId":"",
        "workState":"在职"
      },
      nations: [],
      joblevels: [],
      positions: [],
      politicsStatus: [],
      tiptopDegree: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
      visible: false, //部门弹出框是否可见
      defaultProps: { //树形控件的子节点
        children: 'children',
        label: 'name'
      },
      allDeps: [], //所有部门
      inputDepName: '', //部门回显名
      rules: { //提交前的表单验证规则
        name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
        gender: [{required: true, message: '请输入员工性别', trigger: 'blur'}],
        birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
        idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'},
          {pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '身份证号码格式不正确', trigger: 'blur'}
        ],
        wedlock: [{required: true, message: '请输入婚姻状况', trigger: 'blur'}],
        nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
        nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
        politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type:'email', message:'邮箱地址格式不正确', trigger: 'blur'}
        ],
        phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
        address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
        departmentId: [{required: true, message: '请输入所属部门', trigger: 'blur'}],
        jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
        posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
        engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
        tiptopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
        specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
        school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
        beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
        workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
        workId: [{required: true, message: '请输入工号', trigger: 'blur'}],
        contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
        conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
        notWorkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
        beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
        endContract: [{required: true, message: '请输入合同结束日期', trigger: 'blur'}],
        workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}]
      },
      dialogTitle: '',
      //导入数据的图标和文本
      importDataBtnText: '导入数据',
      importDataBtnIcon: 'el-icon-upload2',
      importDataDisabled: false,
      //令牌
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      },
      //高级搜索弹出框
      showAdvanceSearchVisible: false
    };
  },
  methods: {
    //初始化员工列表
    initEmps() {
      this.loading = true;
      this.getRequest("/employee/basic/?currentPage="+this.page + '&size='+this.size 
        + '&name='+this.empName).then((resp) => {
        this.loading = false;
        if (resp) {
          this.emps = resp.obj.data;
          this.total = resp.obj.total;
        }
      });
    },
    //因为职位变动大，所以另外写，并且在打开添加对话框的时候调用初始化
    initPositions(){
      this.getRequest('/employee/basic/positions').then(resp=>{
        if(resp){
          this.positions = resp.obj;
        }
      })
    },
    // 初始化添加员工的死数据
    initData(){
      if(!window.sessionStorage.getItem('nations')){
        this.getRequest('/employee/basic/nations').then(resp=>{
          if(resp){
            this.nations = resp.obj;
            window.sessionStorage.setItem('nations', JSON.stringify(this.nations))
          }
        })
      }else{
        this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
      }
      if(!window.sessionStorage.getItem('joblevels')){
        this.getRequest('/employee/basic/joblevels').then(resp=>{
          if(resp){
            this.joblevels = resp.obj;
            window.sessionStorage.setItem('joblevels', JSON.stringify(this.joblevels))
          }
        })
      }else{
        this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'))
      }
      if(!window.sessionStorage.getItem('politicsStatus')){
        this.getRequest('/employee/basic/politicsStatus').then(resp=>{
          if(resp){
            this.politicsStatus = resp.obj;
            window.sessionStorage.setItem('politicsStatus', JSON.stringify(this.politicsStatus))
          }
        })
      }else{
        this.politicsStatus = JSON.parse(window.sessionStorage.getItem('politicsStatus'))
      }
      if(!window.sessionStorage.getItem('allDeps')){
        this.getRequest('/employee/basic/departments').then(resp=>{
          if(resp){
            this.allDeps = resp.obj;
            window.sessionStorage.setItem('allDeps', JSON.stringify(this.allDeps))
          }
        })
      }else{
        this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'))
      }
    },
    //获取工号
    getMaxWorkId(){
      this.getRequest('/employee/basic/maxWorkId').then(resp=>{
        if(resp){
          this.emp.workId = resp.obj;
        }
      })
    },
    //打开添加框
    showAddEmpView(){
      this.dialogTitle = '添加员工'
      this.emp = {  // 添加/修改员工的对象
        "address":"",
        "beginContract":"",
        "beginDate":"",
        "birthday":"",
        "contractTerm":"",
        "conversionTime":"",
        "department":null,
        "departmentId":"",
        "email":"",
        "endContract":"",
        "engageForm":"",
        "gender":"",
        "id":"",
        "idCard":"",
        "jobLevelId":"",
        "joblevel":null,
        "name":"",
        "nation":null,
        "nationId":"",
        "nativePlace":"",
        "notWorkDate":"2022-03-28",
        "phone":"",
        "politicId":"",
        "politicsStatus":null,
        "posId":"",
        "position":null,
        "salary":null,
        "salaryId":'1',
        "school":"",
        "specialty":"",
        "tiptopDegree":"",
        "wedlock":"",
        "workAge":null,
        "workId":"",
        "workState":"在职"
      },
      this.inputDepName = '';
      this.dialogVisible = true;
      this.getMaxWorkId();
    },
    //关闭添加框
    closeAddDialog(){
      this.visible = false;
    },
    // 页面改变
    currentChange(currentPage){
      this.page = currentPage;
      this.initEmps();
    },
    sizeChange(size){
      this.size = size;
      this.initEmps();
    },
    //打开关闭部门框
    showDepView(){
      this.visible = !this.visible;
    },
    handleNodeClick(data){
      this.inputDepName = data.name;
      this.emp.departmentId = data.id;
      this.visible = !this.visible;
    },
    //执行添加/修改员工
    doAddEmp(){
      console.log(JSON.stringify(this.emp));
      if(this.emp.id){
        //修改员工
        this.$refs.empForm.validate(valid=>{
          if(valid){
            this.putRequest('/employee/basic/', this.emp).then(resp=>{
              if(resp){
                this.dialogVisible = false;
                this.initEmps();
              }
            })
          }
        })
      }else{
        //添加员工
        this.$refs.empForm.validate(valid=>{
          if(valid){
            console.log(JSON.stringify(this.emp));
            this.postRequest('/employee/basic/', this.emp).then(resp=>{
              if(resp){
                this.dialogVisible = false;
                this.initEmps();
              }
            })
          }
        })
      }
      
    },
    //删除员工
    deleteEmp(data){
      this.$confirm('此操作将永久删除[ '+data.name+' ]该员工，是否继续？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteRequest('/employee/basic/'+data.id).then(resp=>{
              if(resp){
                this.initEmps();
              }
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    //编辑员工
    showEditEmpView(data){
      console.log(JSON.stringify(this.emp));
      this.dialogTitle = '编辑员工';
      Object.assign(this.emp, data)
      this.inputDepName = data.department.name;
      this.initPositions();
      this.dialogVisible = true;
    },
    //导出数据
    exportData(){
      this.downloadRequest('/employee/basic/export')
    },
    //上传文件成功之前
    beforeUpload(){
      this.importDataBtnText = '正在上传';
      this.importDataBtnIcon = 'el-icon-loading';
      this.importDataDisabled = true;
    },
    //上传成功
    onSuccess(){
      this.importDataBtnText = '导入数据';
      this.importDataBtnIcon = 'el-icon-upload';
      this.importDataDisabled = false;
      this.initEmps();
    },
    //上传失败
    onError(){
      this.importDataBtnText = '导入失败';
      this.importDataBtnIcon = 'el-icon-upload';
      this.importDataDisabled = false;
    }
  },
  mounted() {
    this.initEmps();
    this.initData();
    this.initPositions();
  },
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>